<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2987357_u9nviiq8498.css">
    <link rel="stylesheet" href="../css/reset.css">

    <link rel="stylesheet" href="../css/cart/addcart.css">
</head>

<body>
    <header>
        <div class="marquee">
            <div class="marqueeCon w">

                <div class="mar_left">
                    <em class="iconfont icon-laba"></em>
                    <span>最新公告：</span>
                </div>

                <div id="scroll_div" class="fl">
                    <div id="scroll_begin">
                        注册得200元礼遇，先到先得！
                    </div>
                    <div id="scroll_end"></div>
                </div>


                <div class="mar_right">
                    <img src=""
                        alt="">
                </div>


            </div>
        </div>
        <div class="main">
            <div class="nav w">
                <h1>
                    <a href="">
                        <img src="	http://api.oiwas.com/upload/admin_upload/20210607/f7de14d1306faeac77ac89b339c47380.png"
                            alt="">
                        <span class="fans">粉丝数：36.8万</span>
                    </a>
                </h1>

                <div class="nav_right">
                    <div class="search">
                        <input type="text">
                        <em class="iconfont icon-fangdajing"></em>
                    </div>

                    <div class="nav_font">
                        <a href="">在线客服</a>
                        <a href="">查找店铺</a>
                        <a href="" class="user_regd">登录</a>
                        <a href="../html/cart.html">
                            <em class="iconfont icon-gouwudai"></em>
                        </a>
                    </div>
                </div>
            </div>
            <div class="column ">
                <ul class="w nav_list">
                    <li>
                        <span>首页</span>

                    </li>

                    <li>
                        <span>拉杆箱</span>
                        <ul class="hover_nav_list">
                            <li>商场同款</li>
                            <li>休闲通勤</li>
                            <li>可乐联名</li>
                        </ul>
                    </li>

                    <li>
                        <span>史努比</span>
                    </li>

                    <li>
                        <span>双肩包</span>
                        <ul class="hover_nav_list">
                            <li>商务背包</li>
                            <li>休闲背包</li>
                            <li>可乐联名</li>
                            <li>KiM潮牌</li>
                        </ul>
                    </li>

                    <li>
                        <span>象象包</span>

                    </li>

                    <li>
                        <span>快乐象家庭</span>
                        <ul class="hover_nav_list">
                            <li>时尚妈咪包</li>
                            <li>Q萌童包</li>
                        </ul>
                    </li>

                    <li>
                        <span>新品专区</span>
                    </li>

                    <li>
                        <span>品牌故事</span>
                    </li>

                    <li>
                        <span>爱华仕大广赛</span>
                    </li>

                    <li>
                        <span>招商加盟</span>
                        <ul class="hover_nav_list">
                            <li>分销招商</li>
                            <li>礼品合作</li>
                            <li>百货加盟</li>
                            <li>售后服务</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <div class="page">
        <div class="w">
            <div class="cart">
                <div class="cartLeft">

                    <div class="all_list">

                        <h3 class="cartTitle">您的购物车</h3>

                        <div class="cartSelect">
                            <label for="">
                                <input class="check-all" type="checkbox">
                                <span>
                                    <strong>全选</strong>
                                    (已选中X件)
                                </span>
                            </label>

                            <a href="">继续购买</a>
                        </div>


                        <div class="CartStyle">

                        </div>

                    </div>

                </div>



                <div class="abstract">
                    <div class="cartSummary">
                        <div class="clearfix">
                            <p>
                                <span>商品总计</span>
                                <span class="total-price"></span>
                            </p>
                        </div>

                        <div class="cartBtu">
                            结算
                            <span>→</span>
                        </div>
                    </div>

                    <div class="cartCharge">
                        全场免普通达运费
                    </div>

                    <div class="cartMethod">
                        <p>我们接受下列付款方式</p>

                        <ul>
                            <li class="zfb">
                                <img src="https://img2.baidu.com/it/u=3494098844,2004389666&fm=26&fmt=auto" alt="">
                            </li>
                            <li class="wx">
                                <img src="" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">

        <div class="addren">
            <div class="w">
                <ul>
                    <li>联系我们</li>
                    <li>热线电话：400-887-3868</li>
                    <li>总机：0752-7832299</li>
                    <li>地址：广东省惠州市惠城区演达大道花边岭南花园1-3F</li>
                </ul>
            </div>
        </div>

        <div class="fot_list">
            <div class="list_top w">
                <ul class="nav">
                    <li>
                        <dl>
                            <dt>产品目录</dt>

                            <dd>拉杆箱</a></dd>
                            <dd>史努比</a></dd>
                            <dd>双肩包</a></dd>
                            <dd>象象包</a></dd>
                            <dd>快乐象家庭</a></dd>
                            <dd>新品专区</a></dd>
                            <dd>爱华仕大广赛</a></dd>
                            <dd>招商加盟</a></dd>
                        </dl>
                    </li>


                    <li>
                        <dl>
                            <dt>招商加盟</dt>

                            <dd>分销招商</dd>
                            <dd>礼品合作</dd>
                            <dd>百货加盟</dd>
                            <dd>售后服务</dd>
                        </dl>
                    </li>


                    <li>
                        <dl>
                            <dt>关于爱华仕</dt>
                            <dd>品牌故事</dd>
                            <dd>企业介绍</dd>
                            <dd>查找门店</dd>
                            <dd>意见反馈</dd>

                        </dl>
                    </li>


                    <li>
                        <dl>
                            <dt>我的账号</dt>
                            <dd>订单列表</dd>
                            <dd>账户资料</dd>
                            <dd>我的购物车</dd>
                        </dl>
                    </li>



                    <li>
                        <dl>
                            <dt>友情链接</dt>
                            <dd>天猫爱华仕旗舰店</dd>
                            <dd>爱华仕京东自营旗舰店</dd>
                            <dd>爱华仕官方旗舰店</dd>
                            <dd>爱华仕女包京东旗舰店</dd>
                        </dl>
                    </li>
                </ul>

                <div class="contact">
                    <ul>
                        <li>
                            <img src="http://www.oiwas.com/_nuxt/img/0ab234e.jpg" alt="">
                            <p>微博自媒体</p>
                        </li>

                        <li>
                            <img src="http://www.oiwas.com/_nuxt/img/1da4f69.jpg" alt="">
                            <p>微信公众号</p>
                        </li>


                        <li>
                            <img src="http://www.oiwas.com/_nuxt/img/252623a.jpg" alt="">
                            <p>微信小程序</p>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="list_btm">
                <div class="w">

                    <div class="second_five">
                        <em class="iconfont icon-zhongguo"></em>
                        <span class="zh">
                            中国
                        </span>

                        <ul>
                            <li>隐私声明</li>
                            <li>|</li>
                            <li>使用条款</li>
                            <li>|</li>
                            <li>网站地图</li>
                        </ul>

                    </div>

                    <a href="">
                        Copyright @ 2007-2017 OIWS.All rights reserved. 粤ICP备17107696号
                    </a>
                </div>
            </div>
        </div>

        <a href="javascript:;" class="pos_a" id="goback">
            <em class="iconfont icon-shangyi"></em>
        </a>
    </div>





    <script src="../js/api.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/tools.js"></script>
    <script>
        let oOnes;

        // 返回顶部
        retrun_top()

        // 公告栏
        ScrollImgLeft();

        // 判断用户是否登录
        const user = localStorage.getItem('login_user');

        if (user) {
            $('.user_regd').html(user);
            $('.user_regd').attr('href', './myselef.html');


            cc();

            async function cc() {

                const res = await cart({
                    username: user
                })

                const { status, msg, data } = res;

                if (status) {

                    $('.CartStyle').css('display', 'block');


                    let html = '';
                    data.forEach(v => {
                        html += `
                        <div class="cartList" data_id = "${v.id}">
                                <div class="listInfo">
                                    <label for="">
                                        <input class="check-one" type="checkbox" />
                                    </label>

                                    <div class="infoContent">
                                        <img src="${v.img}" alt="">

                                        <div class="info">
                                            <h5>${v.title}</h5>

                                            <div class="infoDescribe">
                                                <p>筛选色: <span>${v.color}</span></p>
                                                <p>尺寸：<span>${v.size}</span></p>
                                                <div class="infoNum">
                                                    <span class="is_promote">${v.price}</span>
                                                    <span class="cheng">x</span>
                                                    <div class="dropdown">
                                                        <div class="el-select">
                                                            <span class="reduce off">${v.num > 1 ? '-' : ''}</span>
                                                            <input class="count-input" type="text" value="${v.num}" />
                                                            <span class="add">+</span>
                                                        </div>
                                                        <p class="only">仅剩10件</p>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="operate">
                                                <div class="delete-one">
                                                    删除
                                                </div>

                                                <div class="sale_num">￥<span class = "total_last">${v.num * v.price}</span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `
                    });





                    $('.CartStyle').html(html);

                    // 全选
                    $('.check-all').on('click', function () {
                        console.log('xxx');
                        $('.check-one').prop('checked', $(this).prop('checked'))
                        total()
                    })

                    // 反选
                    $('.check-one').on('click', function () {
                        // console.log('aaa');
                        $('.check-one').each((i, v) => {
                            // console.log(v);
                            if (!$(v).prop('checked')) {
                                $('.check-all').prop('checked', false)
                                return false
                            }
                            $('.check-all').prop('checked', true)

                        })

                        total()

                    })


                    // 删除
                    $('.delete-one').on('click', async function () {


                        const id = $(this).parents('.cartList').attr('data_id');
                        console.log(id);

                        const res = await cart_delete({
                            username: user,
                            id
                        });

                        const { status, msg } = res;

                        if (status) {
                            $(this).parents('.cartList').remove()
                            $('.check-one')
                            total()
                        } else {
                            alert(msg)
                        }


                    })


                    // 数量+
                    $('.add').on('click', function () {
                        let c = $(this).prev().val();
                        $(this).prev().val(++c);
                        let price = $(this).parents('.dropdown').prev().prev().html();
                        // console.log(price);
                        $(this).parents('.info').find('.total_last').html(price * c)
                        // console.log(small_price);

                        // 添加减号  把off去掉
                        if ($(this).prev().prev().hasClass('off')) {
                            $(this).prev().prev().html('-');
                            $(this).prev().prev().removeClass('off');
                        }
                        total()

                    })


                    $('.reduce').on('click', function () {
                        if ($(this).html()) {

                            let c = $(this).next().val();
                            $(this).next().val(--c);
                            let price = $(this).parents('.dropdown').prev().prev().html();
                            $(this).parents('.info').find('.total_last').html(price * c)
                            if (c <= 1) {
                                $(this).html('');
                                $(this).addClass('off');
                            }
                            total()




                        }

                    })


                    function total() {
                        let money = 0; count = 0;
                        $('.check-one').each((i, v) => {
                            if ($(v).prop('checked')) {
                                money += $(v).parents('.listInfo').find('.total_last').html() * 1;
                                console.log(money);
                            }

                            console.log(money);
                        })
                        $('.total-price').html(money);
                    }



                } else {
                    alert('啥也没有')
                }
            }
        } else {
            alert('快去登录')
        }



    </script>
</body>

</html>